<template>
    <div>
        <div class="sass">
            <div>
                <div class="div1">1</div>
                <div class="div2">2</div>
                <div class="div3">3</div>
                <div class="div4">4</div>
                <p >大四哈伦裤</p>
            </div>
            
            <p class="p1">1111</p>
            <p class="p2">22222</p>
            <p class="p3">33333</p>
            <div >444</div>
        </div>
        <!-- <div class="test"> 
            <p>3333</p>
        </div> -->
    </div>
</template>
<script>
export default {
    name:'sass',
}
</script>
<style lang="scss">
    $color:red;
    $c:color;
    $w:1000px;
    $y :4 ;
    $h:1000px;
    .sass{
        min-height: 80px;
        border: solid 2px $color;
        background-#{$c}: rgb(167, 167, 196);
        width: $w / 2;
        @for $i from 1 to 5{
            .div#{$i}{
                @if $i > 2{font-size: 20px;}
                @else {font-size: 40px;}
                border-bottom: solid red 10px * $i;
                width: 30px * $i;
                
                // @while $y > 0{
                //     .border-#{$y}{
                //         border-radius: 15px;
                //     }
                //     // $y : $y-1;
                // }
            // @if width > 20px{border-radius: 10px;}
            // @if width > 60px{border-radius: 10px;}
            // @if width > 30px{border-radius: 10px;}
            };
        } 
        .p1{
            font-size: 20px;
            color: #ddd;
            border: solid 2px  yellow;
            margin: 10px;
        }
        .p2{
            @extend .p1;//继承 后面跟的是继承样式的class名
            padding-left: 30px;
        }
        @mixin m1($value:40px,$value2:rgb(35, 126, 88)){//mixin混入传值 可跟参数 
            margin-top: $value;
            color: $value2;
            font-size: 20px;
        }
        .p3{
            @include m1(80px,rgb(205, 0, 205));//mixin混入接收
        }
        & > div{
            @if $h > 500{border-radius: 50%;}
            @else {border-radius: 20%;}
            background: rgb(245, 211, 198);
            height: 200px;
            @function getW($val){
                @return $val - 2px;
            }

            p{
                background: rgb(60, 60, 60);
                width: getW(100);
            }
        }
    }
    .test{
        font-size: 100px;
        color: rgb(205, 0, 205);
        border: solid 20px orange;
    }
</style>